<!DOCTYPE HTML>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="content-security-policy">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>大家一起猜灯谜-能量逗商城提供</title>
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="../css/framework7-icons.css">
    <link rel="stylesheet" href="../css/yxj.css">
    <script type="text/javascript" src="../js/css3d.min.js"></script>
    <script type="text/javascript" src="../js/jstween.min.js"></script>
    <script type="text/javascript" src="../js/framework7.js"></script>
    <script type="text/javascript" src="../js/orienter.min.js"></script>
    <style>
    </style>
</head>
<body>
<div class="statusbar-overlay"></div>
<div class="views">
    <div class="view view-main">
        <div class="navbar">
            <div class="navbar-inner">
                <!--<div class="left game" style="display: none;">-->
                    <!--<div style="margin-top: 10px;">-->
                        <!--<i class="f7-icons size-20 color-green">document_text</i>-->
                        <!--<span class="game-text">游戏说明</span>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="right gift" style="display: none;">
                    <div style="margin-top: 10px;">
                        <i class="f7-icons size-20 color-green">money_yen_fill</i>
                        <span class="gift-text">我的奖品</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="pages navbar-through toolbar-through">
            <div data-page="index" class="page no-navbar">
                <div class="page-content">
                    <div></div>
                    <div id="scene"></div>
                </div>
            </div>
        </div>
        <div class="toolbar">
            <div class="toolbar-inner" style="-webkit-justify-content: space-between;justify-content: space-around">
            </div>
        </div>
        <audio autoplay loop id="bgmusic">
            <source src="../audio/yxj.mp3" type="audio/mpeg">
        </audio>
    </div>
</div>

<script id="playBtnTemplate" type="text/template">
    <div class="btn-wrap {{btnType}}">
        <div class="play-btn">
            <div class="play-btn-down"></div>
            <div class="play-btn-top">{{text}}</div>
        </div>
    </div>
</script>
<script id="questionTemplate" type="text/template">
    <div class="popup popup-question">
        <div class="qtitle">燈謎</div>
        <!--<i class="f7-icons size-30 color-green cancel-btn">close_round_fill</i>-->
        <div class="qcontent">
            <div class="text">
                <p>{{question}}</p>
                <p>{{resType}}</p>
            </div>
            <div class="response">
                <div class="response-wrap">
                    <i class="f7-icons size-20 color-red check-btn wrong-btn">close_round_fill</i>
                    <i class="f7-icons size-20 color-green check-btn right-btn">check_round_fill</i>
                    {{#if isdone}}
                    <div class="done">已回答</div>
                    {{else}}
                    <input class="answer" data-imgcode="{{imgcode}}" data-qcode="{{qcode}}" type="text" placeholder="填写您的答案">
                    {{/if}}
                </div>
            </div>
        </div>
        <div class="qfooter">能量逗荣誉出品</div>
    </div>
</script>
<script id="giftTemplate" type="text/template">
    <div class="popup popup-gift">
        <div class="gift-wrap">
            <div class="gift-desc">
                <p>恭喜你答对<em class="color-green">{{donenum}}道题</em></p>
                <p>获得<em class="color-red">{{title}}</em>称号</p>
                <p>继续答题，奖励更多哦</p>
            </div>
            <div class="gift-img">
                <img src="{{img}}" style="width: 100%;">
            </div>
            <a class="gift-button external" href="{{link}}">领取{{money}}元能量逗奖励</a>
            <!--<div class="gift-qrcode">-->
                <!--<img src="../images/qrcode_nld.jpg" style="width: 100%;">-->
            <!--</div>-->
        </div>
    </div>
</script>
<script>
    //初始化app
    var myApp = new Framework7({
        modalTitle: '能量逗',
        modalButtonOk: '知道了',
        animateNavBackIcon: true,
        precompileTemplates: true,
        template7Pages: true
    });

    //初始化view
    var mainView = myApp.addView('.view-main', {
        dynamicNavbar: true
    });

    //全局参数
    var $$ = Dom7;
    var boxCenterz = -400;//容器中心的Z轴坐标
    var boxStartRotationY = -40;//容器初始Y轴角度
    var cameraStartz = 5000;//相机初始Z轴坐标
    var bgUrl = "../images/yxj/";
    var boxRect = {w: 4700, h: 1335};
    var bgData = [
        {url: bgUrl+'01.jpg'},
        {url: bgUrl+'02.jpg'},
        {url: bgUrl+'03.jpg'},
        {url: bgUrl+'04.jpg'},
        {url: bgUrl+'05.jpg'},
        {url: bgUrl+'06.jpg'},
        {url: bgUrl+'07.jpg'},
        {url: bgUrl+'08.jpg'},
        {url: bgUrl+'09.jpg'},
        {url: bgUrl+'10.jpg'},
        {url: bgUrl+'11.jpg'},
        {url: bgUrl+'12.jpg'},
        {url: bgUrl+'13.jpg'},
        {url: bgUrl+'14.jpg'},
        {url: bgUrl+'15.jpg'},
        {url: bgUrl+'16.jpg'},
        {url: bgUrl+'17.jpg'},
        {url: bgUrl+'18.jpg'},
        {url: bgUrl+'19.jpg'},
        {url: bgUrl+'20.jpg'}
    ];
    var question = [
        {imgcode:0,qcode:0,question:'夫人出走',resType:'（打一字）',answer:'二'},
        {imgcode:1,qcode:9,question:'双喜临门',resType:'（打一两字城市名）',answer:'重庆'},
        {imgcode:2,qcode:1,question:'一',resType:'（打一四字成语）',answer:'接二连三'},
        {imgcode:3,qcode:2,question:'飞砂走石',resType:'（打一字）',answer:'少'},
        {imgcode:4,qcode:0,question:'夫人出走',resType:'（打一字）',answer:'二'},
        {imgcode:5,qcode:3,question:'一叶扁舟深处横，垂杨鸥不惊',resType:'（打一四字成语）',answer:'无人问津'},
        {imgcode:6,qcode:4,question:'一加一',resType:'（打一字）',answer:'王'},
        {imgcode:7,qcode:10,question:'骂不还口',resType:'（打一字动物名）',answer:'马'},
        {imgcode:8,qcode:4,question:'一加一',resType:'（打一字）',answer:'王'},
        {imgcode:9,qcode:5,question:'孔子登山',resType:'（打一字）',answer:'岳'},
        {imgcode:10,qcode:9,question:'双喜临门',resType:'（打一两字城市名）',answer:'重庆'},
        {imgcode:11,qcode:6,question:'人无信不立',resType:'（打一字）',answer:'言'},
        {imgcode:12,qcode:6,question:'人无信不立',resType:'（打一字）',answer:'言'},
        {imgcode:13,qcode:7,question:'画时圆，写时方，冬时短，夏时长',resType:'（打一字）',answer:'日'},
        {imgcode:14,qcode:2,question:'飞砂走石',resType:'（打一字）',answer:'少'},
        {imgcode:15,qcode:8,question:'举杯邀明月',resType:'（打一两字礼貌用语）',answer:'赏光'},
        {imgcode:16,qcode:8,question:'举杯邀明月',resType:'（打一两字礼貌用语）',answer:'赏光'},
        {imgcode:17,qcode:5,question:'孔子登山',resType:'（打一字）',answer:'岳'},
        {imgcode:18,qcode:10,question:'骂不还口',resType:'（打一字动物名）',answer:'马'},
        {imgcode:19,qcode:11,question:'黯',resType:'（打一四字成语）',answer:'有声有色'}
    ];
    var isdone = [];
    var gift = [
        {money:'19.99',link:"https://h5.koudaitong.com/v2/ump/promocard/fetch?alias=jbml886s",img:"../images/yxj/gitf-level-01.jpg"},
        {money:'8.8',link:"https://h5.koudaitong.com/v2/ump/promocard/fetch?alias=hkvujmhf",img:"../images/yxj/gitf-level-02.jpg"},
        {money:'3',link:"https://h5.koudaitong.com/v2/ump/promocard/fetch?alias=oshepnlu",img:"../images/yxj/gitf-level-03.jpg"}
    ];

    //预编译模板
    myApp.playBtnTemplate =  Template7.compile($$('script#playBtnTemplate').html());
    myApp.questionTemplate = Template7.compile($$('script#questionTemplate').html());
    myApp.giftTemplate = Template7.compile($$('script#giftTemplate').html());

    var play_btn_data = {btnType:'play',text:'开始'};
    var play_btn_html = myApp.playBtnTemplate(play_btn_data);
    var left_btn_data = {btnType:'left',text:'左转'};
    var left_btn_html = myApp.playBtnTemplate(left_btn_data);
    var right_btn_data = {btnType:'right',text:'右转'};
    var right_btn_html = myApp.playBtnTemplate(right_btn_data);

    //创建容器
    function createBox(imgs, rect) {
        var _len = imgs.length;
        var _step = rect.w / _len;
        //var _radius = Math.floor(_step / 2 / Math.tan(Math.PI / _len)) - 1;
        var _radius = _step / 2 / Math.tan(Math.PI / _len);

        var _sp = new C3D.Sprite();
        for (var i = 0; i < _len; i++) {
            var _p = new C3D.Plane();
            var _r = 360 / _len * i;
            var _a = Math.PI * 2 / _len * i;
            _p.size(_step, rect.h).position(Math.sin(_a) * _radius, 0, -Math.cos(_a) * _radius).rotation(0, -_r, 0).material({
                image: imgs[i].url,
                repeat: 'no-repeat',
                bothsides: false
            }).update();
            _sp.addChild(_p);

            _p.on('click',function () {
                var qdata = question[$$(this).index()];
                //判断问题是否回答过
                var qid = parseInt(qdata.qcode);
                if (isdone.indexOf(qid) === -1){
                    qdata['isdone'] = false;
                }else {
                    qdata['isdone'] = true;
                }
                var qhtml = myApp.questionTemplate(qdata);
                myApp.popup(qhtml);
            });
        }

        return _sp;
    }

    //加载开始按钮
    $$('.toolbar .toolbar-inner').html(play_btn_html);

    //创建场景
    var s = new C3D.Stage();
    s.size(window.innerWidth, window.innerHeight).material({
        color: "#000"
    }).update();
    $$('#scene').append(s.el);

    //创建容器放入场景
    var box = createBox(bgData, boxRect);
    box.position(0, 0, boxCenterz).rotation(0,boxStartRotationY,0).updateT();
    s.addChild(box);
    s.camera.position(0,0,cameraStartz).updateT();

    //响应屏幕调整尺寸
    function resize() {
        s.size(window.innerWidth, window.innerHeight).update();
    }

    window.onresize = function () {
        resize();
    };
    resize();

    //动画
    var requestAnimationFrame = window.requestAnimationFrame
        || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame
        || function (callback) {
            setTimeout(callback, 1000 / 60);
        };
    var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
    //重力感应
    var o = new Orienter();
    var lon;
    var orientisOpen = false;
    var platform = o.os;
    o.onOrient = function (obj) {
        lon = obj.lon;
    };
    //向左旋转
    var animLeft;
    function left(){
        console.log('animLeft');
        s.camera.rotate(0,0.5,0).updateT();
        animLeft = requestAnimationFrame(left);
    }
    //向右旋转
    var animRight;
    function right(){
        console.log('animRight');
        s.camera.rotate(0,-0.5,0).updateT();
        animRight = requestAnimationFrame(right);
    }
    //按钮事件
    $$(document).on('touchstart','.play .play-btn',function () {
        $$('.play .play-btn-top').css({top:'-46px'});
    });
    $$(document).on('touchend','.play .play-btn',function () {
        $$('.play .play-btn-top').css({top:'-50px'});
        $$('.play').remove();
        $$('#scene').show();
        //开始动画
        JT.fromTo(s.camera, 3, {z: cameraStartz}, {
            z: boxCenterz, ease: JT.Linear.In, onUpdate: function () {
                s.camera.updateT();
            },onEnd:function(){
                //开始动画结束
                switch (platform){
                    case 'ios':
                        //重力感应生效
                        o.init();
                        orientisOpen = true;
                        break;
                    case 'android':
                        $$('.toolbar .toolbar-inner').append(left_btn_html);
                        $$('.toolbar .toolbar-inner').append(right_btn_html);
                        break;
                }
                //显现导航栏
                $$('.gift').show();
                $$('.game').show();
            }
        });

    });
    $$(document).on('touchstart','.left .play-btn',function () {
        $$('.left .play-btn-top').css({top:'-46px'});
        animLeft = requestAnimationFrame(left);
    });
    $$(document).on('touchend','.left .play-btn',function () {
        $$('.left .play-btn-top').css({top:'-50px'});
        cancelAnimationFrame(animLeft);
    });
    $$(document).on('touchstart','.right .play-btn',function () {
        $$('.right .play-btn-top').css({top:'-46px'});
        animRight = requestAnimationFrame(right);
    });
    $$(document).on('touchend','.right .play-btn',function () {
        $$('.right .play-btn-top').css({top:'-50px'});
        cancelAnimationFrame(animRight);
    });
    $$(document).on('click','.cancel-btn',function () {
       myApp.closeModal('.popup-question');
    });
    var isgiftremind = false;
    $$(document).on('change','.answer',function () {
        $$('.popup-question .check-btn').hide();
        //问题id
        var qid = parseInt($$(this).data('qcode'));
        var qindex = parseInt($$(this).data('imgcode'));
        //答案
        var answer = question[qindex].answer;
        //用户输入
        var input = $$(this).val().replace(/(^\s*)|(\s*$)/g, "");
        //比对
        if(answer == input) {
            $$('.check-btn.right-btn').show();
            //记录回答过的问题
            isdone.push(qid);
            //答对提示
            if (!isgiftremind){
                myApp.alert('恭喜答对<p>您可以在我的奖品中查看您的奖励');
                isgiftremind = true;
            }
            //关闭页面
            myApp.closeModal('.popup-question');
        } else {
            $$('.check-btn.wrong-btn').show();
        }

    });
    $$(document).on('click','.gift',function () {
        var donenum = isdone.length;
        var title,money,link,img;
        if (donenum <1){
          myApp.alert("您还没有答题哦");
          return;
        } else if (donenum<5){
            title = "灯谜·小试牛刀";
            money = gift[2].money;
            img = gift[2].img;
            link = gift[2].link;
        } else if(donenum > 4 && donenum < 9) {
            title = "灯谜·大显身手";
            money = gift[1].money;
            img = gift[1].img;
            link = gift[1].link;
        } else{
            title = "灯谜·一代宗师";
            money = gift[0].money;
            img = gift[0].img;
            link = gift[0].link;
        }
        var giftdata = {donenum:donenum,title:title,money:money,img:img,link:link};
        var ghtml = myApp.giftTemplate(giftdata);
        myApp.popup(ghtml);
    });
    //场景渲染
    var animUpdateScene;
    function updateScene() {
        if (orientisOpen)
            s.camera.rotation(0, lon, 0).updateT();
        //box.rotate(0,0.1,0).updateT();
        animUpdateScene = requestAnimationFrame(updateScene);
    }
    animUpdateScene = requestAnimationFrame(updateScene);
</script>
</body>
